<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- modelset.iframe.html - "../apps/com.awspaas.user.apps.modelgf/modelset" -->
    <link rel="stylesheet" href="./js/lib/element-plus/element-plus-2.11.8.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/lib/vue.global.prod-3.5.24.js"></script>
    <script src="./js/lib/element-plus/element-plus-2.11.8.min.js"></script>
    <script src="./js/lib/axios.min.js"></script>
    <script>
        var sid = '<#sid>' //session 
        var formInfo = '<#formInfo>' // 表单设置+表单信息
    </script>
</head>
<body>
    <div id="app">
        <div class="form-container">
            <el-form 
                ref="formRef"
                :model="form" 
                :rules="rules" 
                label-width="120px" 
                label-position="top"
            >
                <template v-for="(val, index) in formData">
                <el-form-item 
                    v-if="val.isShow"
                    :key="index"
                    :label="val.label"
                    :prop="val.attr"
                    :rules="[{
                        required: val.required,
                        message: `${val.label}不能为空`,
                        trigger: val.type === 'input' ? 'blur' : 'change'
                    }]"
                >

                    <template v-if="formType[val.type] === 'select'">
                        <el-select
                            v-model="form[val.attr]"
                            :placeholder="val.placeholder"
                            :clearable="val.clearable"
                            :disabled="val.disabled"
                            style="width: 100%"
                            filterable
                        >
                            <el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                    <template v-else-if="formType[val.type] === 'input'">
                        <el-input
                            v-model="form[val.attr]"
                            :placeholder="val.placeholder"
                            :clearable="val.clearable"
                            :disabled="val.disabled"
                            style="width: 100%"
                        />
                    </template>
                    <template v-else-if="formType[val.type] === 'textarea'">
                        <el-input
                            v-model="form[val.attr]"
                            type="textarea"
                            :placeholder="val.placeholder"
                            :disabled="val.disabled"
                            style="width: 100%; height: 150px"
                        />
                    </template>
                    <template v-else-if="formType[val.type] === 'date'">
                        <el-date-picker
                            v-model="form[val.attr]"
                            type="date"
                            :placeholder="val.placeholder"
                            :disabled="val.disabled"
                            style="width: 100%"
                        /> 
                    </template>
                    <div v-else>
                        不支持的表单类型: {{ val.type }}
                    </div>
                </el-form-item>
                </template>

                <!--开发环境测试使用-->
                <el-form-item v-if="isDev">
                    <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>